<template>
  <div>
    <el-card>
      <div id="containerDistance"></div>

      <div id="info">点击地图获取量测点，右键或双击左键结束测量</div>
      <div
        class="input-card"
        style="width: 20rem; background-color: transparent; box-shadow: none"
      >
        <div class="input-item">
          <input
            type="button"
            class="btn"
            id="default"
            value="默认样式测距"
            style="margin-right: 1rem"
          />
          <input type="button" class="btn" id="custom" value="自定义样式测距" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";

export default {
  name: "Distance",
  setup(context, props) {
    window._AMapSecurityConfig = {
      securityJsCode: "7a147469fc71afc2c2540196e2453b2b",
    };
    const map = shallowRef(null);
    return {
      map,
    };
  },
  methods: {
    initMap() {
      let instance = this;
      AMapLoader.load({
        key: "2b45c6a7655404e69a9b856504d8625c", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          this.map = new AMap.Map("containerDistance", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [117.301291, 31.844148], //初始化地图中心点位置
            mapStyle: "amap://styles/darkblue",
          });
          AMap.plugin(["AMap.RangingTool"], () => {
            let ruler1 = new AMap.RangingTool(instance.map);
            let startMarkerOptions = {
              icon: new AMap.Icon({
                size: new AMap.Size(19, 31), //图标大小
                imageSize: new AMap.Size(19, 31),
                image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png",
              }),
            };
            let endMarkerOptions = {
              icon: new AMap.Icon({
                size: new AMap.Size(19, 31), //图标大小
                imageSize: new AMap.Size(19, 31),
                image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png",
              }),
              offset: new AMap.Pixel(-9, -31),
            };
            let midMarkerOptions = {
              icon: new AMap.Icon({
                size: new AMap.Size(19, 31), //图标大小
                imageSize: new AMap.Size(19, 31),
                image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png",
              }),
              offset: new AMap.Pixel(-9, -31),
            };
            let lineOptions = {
              strokeStyle: "solid",
              strokeColor: "#FF33FF",
              strokeOpacity: 1,
              strokeWeight: 2,
            };
            let rulerOptions = {
              startMarkerOptions: startMarkerOptions,
              midMarkerOptions: midMarkerOptions,
              endMarkerOptions: endMarkerOptions,
              lineOptions: lineOptions,
            };
            let ruler2 = new AMap.RangingTool(instance.map, rulerOptions);

            //启用默认样式测距
            document.getElementById("default").onclick = function () {
              ruler2.turnOff();
              ruler1.turnOn();
            };
            //启用自定义样式测距
            document.getElementById("custom").onclick = function () {
              ruler1.turnOff();
              ruler2.turnOn();
            };
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  activated() {
    // 页面活动时加载地图容器
    this.initMap();
  },
  deactivated() {
    //页面失去焦点后删除地图容器
    this.map.destroy();
  },
};
</script>

<style lang="less" scoped>
#containerDistance {
  width: calc(100vw - 200px);
  height: calc(100vh - 3rem);
  position: absolute;
  top: 3rem;
  left: 200px;
}

@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
</style>
